<template>
  <div class="emailVerify">
    <el-col class="verigyConainter" :xs="22">
      <div class="title">Email Verification</div>
      <div class="verifyInfo">
        <p>Verify your email We will send a verification code to ****234@gmail.com</p>
        <p>
          To verify that Val is your email address, enter the 6-digit verification code
          below.
        </p>
      </div>
      <div class="inputBox">
        <div
          class="g-remove-check-code_content"
          @keyup="fnCheckCodeKeyup"
          @keydown="fnCheckCodeKeydown"
          @paste="fnCheckCodeKeyPaste"
          @input="fnCheckCodeInputEvent"
        >
          <input
            :class="{ 'g-code-input_color': aCheckCodeInputComputed[0] !== '' }"
            max="9"
            min="0"
            maxlength="1"
            data-index="0"
            v-model.trim.number="aCheckCodeInputComputed[0]"
            type="number"
            ref="firstInputRef"
          />
          <input
            :class="{ 'g-code-input_color': aCheckCodeInputComputed[1] !== '' }"
            max="9"
            min="0"
            maxlength="1"
            data-index="1"
            v-model.trim.number="aCheckCodeInputComputed[1]"
            type="number"
          />
          <input
            :class="{ 'g-code-input_color': aCheckCodeInputComputed[2] !== '' }"
            max="9"
            min="0"
            maxlength="1"
            data-index="2"
            v-model.trim.number="aCheckCodeInputComputed[2]"
            type="number"
          />
          <input
            :class="{ 'g-code-input_color': aCheckCodeInputComputed[3] !== '' }"
            max="9"
            min="0"
            maxlength="1"
            data-index="3"
            v-model.trim.number="aCheckCodeInputComputed[3]"
            type="number"
          />
          <input
            :class="{ 'g-code-input_color': aCheckCodeInputComputed[4] !== '' }"
            max="9"
            min="0"
            maxlength="1"
            data-index="4"
            v-model.trim.number="aCheckCodeInputComputed[4]"
            type="number"
          />
          <input
            :class="{ 'g-code-input_color': aCheckCodeInputComputed[5] !== '' }"
            max="9"
            min="0"
            maxlength="1"
            data-index="5"
            v-model.trim.number="aCheckCodeInputComputed[5]"
            type="number"
          />
        </div>
      </div>
      <div class="tipBox">
        <p>If you do not receive the email, please check your spam folder.</p>
        <p>30 Seconds later. <span>Resend</span></p>
      </div>

      <el-button color="#00AA8B">Confirm</el-button>
    </el-col>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue';
const Val = reactive({
  aCheckCodeInput: ['', '', '', '', '', ''],
  aCheckCodePasteResult: [],
});

const aCheckCodeInputComputed = computed(() => {
  if (Val.aCheckCodePasteResult.length === 6) {
    return Val.aCheckCodePasteResult;
  } else if (
    Val.aCheckCodeInput &&
    Array.isArray(Val.aCheckCodeInput) &&
    Val.aCheckCodeInput.length === 6
  ) {
    return Val.aCheckCodeInput;
  } else if (/^\d{6}$/.test(Val.aCheckCodeInput.toString())) {
    return Val.aCheckCodeInput.toString().split('');
  } else {
    return new Array(6);
  }
});

function fnCheckCodeKeyup(e) {
  const index = e.target.dataset.index * 1;
  const el = e.target;
  // 解决输入e的问题
  el.value = el.value.replace(/Digit|Numpad/i, '').slice(0, 1);
  if (/Digit|Numpad/i.test(e.code)) {
    // 必须在这里赋值，否则输入框会是空值
    Val.aCheckCodeInput.splice(index, 1, e.code.replace(/Digit|Numpad/i, ''));
    el.nextElementSibling && el.nextElementSibling.focus();
    if (index === 5) {
      if (Val.aCheckCodeInput.join('').length === 6) document.activeElement.blur();
    }
  }
}

function fnCheckCodeKeydown(e) {
  let index = e.target.dataset.index * 1;
  const el = e.target;
  if (e.key === 'Backspace') {
    if (Val.aCheckCodeInput[index].length > 0) {
      Val.aCheckCodeInput.splice(index, 1, '');
    } else {
      if (el.previousElementSibling) {
        el.previousElementSibling.focus();
        Val.aCheckCodeInput[index - 1] = '';
      }
    }
  } else if (e.key === 'Delete') {
    if (Val.aCheckCodeInput[index].length > 0) {
      Val.aCheckCodeInput.splice(index, 1, '');
    } else {
      if (el.nextElementSibling) {
        el.nextElementSibling.focus();
        Val.aCheckCodeInput[++index] = '';
      }
    }
  } else if (e.key === 'Home') {
    el.parentElement.children[0] && el.parentElement.children[0].focus();
  } else if (e.key === 'End') {
    el.parentElement.children[Val.aCheckCodeInput.length - 1] &&
      el.parentElement.children[Val.aCheckCodeInput.length - 1].focus();
  } else if (e.key === 'ArrowLeft') {
    if (el.previousElementSibling) el.previousElementSibling.focus();
  } else if (e.key === 'ArrowRight') {
    if (el.nextElementSibling) el.nextElementSibling.focus();
  }
}
function fnCheckCodeInputEvent(e) {
  const index = e.target.dataset.index * 1;
  const el = e.target;
  el.value = el.value.replace(/Digit|Numpad/i, '').slice(0, 1);
  Val.aCheckCodeInput[index] = el.Value;
}
// 验证码粘贴
function fnCheckCodeKeyPaste(e) {
  e.clipboardData.items[0].getAsString((str) => {
    if (str.toString().length === 6) {
      Val.aCheckCodePasteResult = str.split('');
      document.activeElement.blur();
      Val.aCheckCodeInput = Val.aCheckCodeInputComputed;
      Val.aCheckCodePasteResult = [];
    } else {
      // 如果粘贴内容不合规，清除所有内容
      Val.aCheckCodeInput = ['', '', '', '', '', ''];
    }
  });
}
</script>
<style scoped lang="less">
.emailVerify {
  overflow: hidden;
  .verigyConainter {
    width: 464px;
    margin: 0 auto;
    margin: 60.25px auto 0;

    .title {
      font-size: 28px;
      color: #ffffff;
      margin-bottom: 16px;
    }
    .verifyInfo {
      color: #ffffff;
      font-size: 15px;
      margin-bottom: 25px;
    }
    .inputBox {
      .g-remove-check-code_content {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;

        input {
          width: 71px;
          height: 75px;
          text-align: center;
          font-size: 100px;
          outline: none;
        }
      }
    }
    .tipBox {
      font-size: 15px;
      color: #ffffff;
      margin: 25px 0;
      span {
        color: #00aa8b;
      }
    }
    .el-button {
      width: 100%;
      height: 44px;
    }
  }
  @media screen and (max-width: 768px) {
    .verigyConainter {
      margin-top: 30px;
      .g-remove-check-code_content {
        input {
          width: 49.93px !important;
        }
      }
    }
  }
}
</style>
